import { getAllItems } from '@/lib/data';
import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';

// 获取装备数据
const items = getAllItems();

// 装备类型
const itemTypes = ["全部", "攻击", "法术", "防御", "移动", "打野"];

export default function ItemsPage() {
  const [selectedType, setSelectedType] = useState("全部");

  // 根据选择的类型筛选装备
  const filteredItems = selectedType === "全部"
    ? items
    : items.filter(item => item.type === selectedType);

  return (
    <div className="space-y-8">
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold">装备信息库</h1>
        <div className="flex space-x-2">
          {itemTypes.map(type => (
            <button
              key={type}
              onClick={() => setSelectedType(type)}
              className={`px-4 py-2 rounded-lg ${
                selectedType === type
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-200 text-gray-800 hover:bg-gray-300'
              }`}
            >
              {type}
            </button>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {filteredItems.map(item => (
          <Link href={`/items/${item.id}`} key={item.id} className="block">
            <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
              <div className="relative h-24 flex items-center justify-center bg-gray-100 p-4">
                {/* Placeholder for actual image */}
                <div className="relative w-16 h-16 bg-gray-300 rounded">
                   <span className="absolute inset-0 flex items-center justify-center text-xs text-gray-500">图标</span>
                </div>
              </div>
              <div className="p-4">
                <h3 className="font-bold text-lg truncate">{item.name}</h3>
                <p className="text-sm text-yellow-600">{item.price} G</p>
                <span className={`mt-1 inline-block px-2 py-1 text-xs rounded ${ item.type === '攻击' ? 'bg-red-100 text-red-800' : item.type === '法术' ? 'bg-purple-100 text-purple-800' : item.type === '防御' ? 'bg-green-100 text-green-800' : item.type === '移动' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800'}`}>
                  {item.type}
                </span>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}
